<template>
	<view style="padding-bottom: 90px;">
		<view class="userInfo">
			<image class="user-head" :src="trendDetailVO.head"></image>
			<view class="user-text">
				<view>{{trendDetailVO.nickName}}</view>
				<view style="position: absolute;bottom: 0px;font-size: 15px;color: #cdcdcd;">{{trendDetailVO.area}}
				</view>
			</view>
			<view class="regard-btn">关注</view>
		</view>

		<view class="trend-content">
			<swiper class="swiper" :interval="interval" :duration="duration" :style="swiperDisplay()">
				<swiper-item v-for="(item,index) in trendDetailVO.images">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
			<view style="margin-top: 10px; width: 96%; margin-left: 2%;">{{ trendDetailVO.content }}</view>
		</view>

		<view class="trend-comment">
			<view style="margin-left: 15px;font-size: 15px;font-weight: bold;">萌友点评</view>
			<view class="comment" v-for="(item,index) in commentList">
				<view class="comment-user-info">
					<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
					<view style="height: 30px; font-size: 10px; margin-left: 5px;">
						<view style="font-weight: bold;">{{item.createNickName}}</view>
						<view style="color: #cdcdcd;">{{item.createTime}}</view>
					</view>
					<view style="position: absolute; right: 0px; font-size: 10px; color: #ffd524;" @click="reply(item.id,item.id,item.createUserId)">回复
					</view>
				</view>
				<view class="comment-content">{{item.content}}</view>
				
				<view style="font-size: 10px; color: #ffd524;margin-left: 35px;margin-top: 5px;" @click="clickExpand">{{expandContent}}</view>
				
				<view v-for="child in (item.children)" class="child-comment" :style="display">
					<view class="child-comment-info">
						<view>{{child.createNickName}}</view>
						<view>回复</view>
						<view>{{child.toNickName}}</view>
					</view>	
					<view style="width: 100%; margin-left: 10px">{{child.content}}</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="collect-box" @click="clickCollect()">
				<uni-icons :type="collectIcon" size="25" :color="collectColor" style="margin-left: 7.5px;"></uni-icons>
				<view style="font-size: 10px; text-align: center;">{{collectText}}</view>
			</view>

			<view class="chat-box"  :style="trendDetailVO.userId == userVO.id? 'display:none;' : 'display:block;'" @click="clickchat()">
				<uni-icons type="chat" size="25" color="#cdcdcd" style="margin-left: 7.5px;"></uni-icons>
				<view style="font-size: 10px; text-align: center;">聊一聊</view>
			</view>

			<view style="height: 30px; border: 1px solid #ffd524;
			 width: 40%; border-radius: 25px;margin-left: 20px;
			 margin-top: 10px;font-size: 15px; 
			 color: #cdcdcd;text-align: center;line-height: 30px;" @click="toggle('center')">{{commentContent}}
			</view>

			<view class="push-comment-btn" @click="clickPublish">发表</view>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" @change="change">
				<view class="popup-content">
					<view style="background-color: white; border: 1px solid #ffd524; border-radius: 10px; overflow: hidden;
					padding-left: 20px;">
						<uni-easyinput type="textarea" autoHeight v-model="commentContent" placeholder="请输入内容"
							maxlength="200" :inputBorder="false" :focus="true"></uni-easyinput>
					</view>
				</view>
				<view style="position: absolute; bottom: 0px;right: 5px; color: #cdcdcd; line-height: 30px;"
					@click="clickPublish">发表</view>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	import {
		getTrendDetail,
		getCommentsByTrendId,
		collectTrend
	} from "@/api/trend.js"
	import {
		publishComment
	} from "@/api/comment.js"
	export default {
		data() {
			return {
				trendDetailVO: {},
				interval: 2000,
				duration: 500,
				images: [],
				commentList: [],
				collectIcon: 'star',
				collectColor: '#cdcdcd',
				collectText: '收藏',
				trendId: 0,
				collectFlag: false,
				// 当前用户信息
				userVO: {},
				type: 'center',
				commentContent: "说点什么",
				display:"",
				expandFlag: false,
				expandContent: "点击展开"
			}
		},
		methods: {
			swiperDisplay() {
				if (this.images.length == 0) {
					return "display:none;"
				}
			},
			clickCollect() {
				const trendCollect = {
					trendId: this.trendId,
					flag: this.collectFlag
				}
				collectTrend(trendCollect).then(res => {
					console.log(res)
					if (trendCollect.flag) {
						this.collectIcon = "star";
						this.collectColor = "#cdcdcd";
						this.collectText = '收藏';
					} else {
						this.collectIcon = "star-filled";
						this.collectColor = "#ffd524";
						this.collectText = '已收藏';
					}
				})

				this.collectFlag = !this.collectFlag
			},
			clickchat() {
				uni.navigateTo({
					url: "/pages/chat_room/index?currentUserId=" + this.userVO.id + "&toUserId=" + this
						.trendDetailVO.userId
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 发表评论
			clickPublish() {
				const trendId = this.trendId;
				const commentDTO = {
					content: this.commentContent,
					trendId: trendId,
					parentId: -1,
					toUserId: -1,
					toCommentId: -1
				}
				publishComment(commentDTO).then(res => {
					uni.showToast({
						title: "评论成功",
						icon: "success"
					})
					this.$refs.popup.close()
					this.commentContent = "说点什么"
					getCommentsByTrendId(trendId).then(res => {
						this.commentList = res.data;
					});
				});
			},
			// 回复评论
			reply(parentId,toCommentId,toUserId){
				const trendId = this.trendId;
				const commentDTO = {
					content: "我好帅!",
					trendId: trendId,
					parentId: parentId,
					toUserId: toUserId,
					toCommentId: toCommentId
				}
				publishComment(commentDTO).then(res => {
					uni.showToast({
						title: "回复成功",
						icon: "success"
					})
					this.$refs.popup.close()
					getCommentsByTrendId(trendId).then(res => {
						this.commentList = res.data;
					});
				});
			},
			clickExpand(){
				if(this.expandFlag){
					this.display = "display:none;"
					this.expandContent = "点击展开"
					this.expandFlag = !this.expandFlag;
				}else{
					this.display = "display:block;"
					this.expandContent = "点击收起"
					this.expandFlag = !this.expandFlag;
				}

			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			const trendId = option.trendId;
			this.trendId = trendId;
			getTrendDetail(trendId).then(res => {
				this.trendDetailVO = res.data;
				this.images = this.trendDetailVO.images;
				if (this.trendDetailVO.collectFlag) {
					this.collectIcon = "star-filled";
					this.collectColor = "#ffd524";
					this.collectText = '已收藏';
					this.collectFlag = this.trendDetailVO.collectFlag
				}
			});
			getCommentsByTrendId(trendId).then(res => {
				console.log(res.data);
				this.commentList = res.data;
			});

			let userVO = {};
			uni.getStorage({
				key: 'userVO',
				success: function(res) {
					userVO = res.data;
				}
			});

			this.userVO = userVO;
		}
	}
</script>

<style>
	.userInfo {
		width: 94%;
		height: 80px;
		background-color: white;
		border-radius: 10px;
		margin-left: 3%;
		margin-top: 10px;
		display: flex;
		position: relative;
	}

	.user-head {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-top: 15px;
		margin-left: 10px;
	}

	.user-text {
		height: 50px;
		margin-top: 15px;
		margin-left: 10px;
		position: relative;
	}

	.regard-btn {
		height: 30px;
		width: 60px;
		background-color: #ffd524;
		border-radius: 5px;
		line-height: 30px;
		text-align: center;
		position: absolute;
		right: 20px;
		top: 25px;
	}

	.trend-content {
		width: 94%;
		background-color: white;
		border-radius: 10px;
		margin-left: 3%;
		margin-top: 10px;
		padding-bottom: 20px;
		overflow: hidden;
	}

	.trend-comment {
		width: 94%;
		background-color: white;
		border-radius: 10px;
		margin-left: 3%;
		margin-top: 10px;
		padding-bottom: 20px;
		padding-top: 10px;
	}

	.comment {
		width: 90%;
		margin-left: 15px;
		margin-top: 15px;
		position: relative;
	}

	.comment-content {
		font-size: 10px;
		color: #cdcdcd;
		margin-left: 35px;
		margin-top: 2px;
		width: 80%;
	}
	
	.child-comment{
		font-size: 10px;
		color: #cdcdcd;
		margin-left: 35px;
		margin-top: 8px;
		width: 80%;
	}
	
	.child-comment-info{
		display: flex;
		width: 100%;
	}
	
	.child-comment-info > view{
		margin-left: 10px;
	}

	.comment-user-info {
		height: 30px;
		width: 90%;
		display: flex;
	}

	.comment-user-info>image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.bottom-box {
		position: fixed;
		width: 100%;
		background-color: #fff;
		height: 50px;
		border-radius: 10px;
		left: 0;
		bottom: 0;
		display: flex;
	}

	.collect-box {
		height: 40px;
		margin-top: 5px;
		margin-left: 20px;
		width: 40px;
	}

	.chat-box {
		height: 40px;
		margin-top: 5px;
		margin-left: 10px;
		width: 40px;
	}

	.push-comment-btn {
		height: 30px;
		width: 20%;
		border-radius: 25px;
		background-color: #ffd524;
		margin-top: 10px;
		font-size: 15px;
		text-align: center;
		line-height: 30px;
		position: absolute;
		right: 3%;
	}

	/* 弹出层内容样式 */
	.popup-content {
		width: 300px;
		padding-bottom: 30px;
		position: relative;
	}


	@media only screen and (min-width: 375px) and (max-width: 500px) {
		.swiper {
			height: 350px;
		}

		.swiper-item {
			display: block;
			height: 350px;
		}

		.swiper uni-image {
			width: 100%;
			height: 100%;
			margin-left: 1px;
		}

		.swiper uni-image>div {
			background-size: cover !important;
			background-position: center !important;
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 1200px) {
		.swiper {
			height: 700px;
		}

		.swiper-item {
			display: block;
			height: 700px;
		}

		.swiper uni-image {
			width: 100%;
			height: 100%;
			margin-left: 1px;
		}

		.swiper uni-image>div {
			background-size: cover !important;
			background-position: center !important;
		}
	}
</style>